<!--
 * @Author: 黄宇/Hyuishine
 * @Date: 2021-12-20 19:32:54
 * @LastEditors: 徐伟杰
 * @LastEditTime: 2022-11-14 17:18:45
 * @Description: 
 * @Email: hyuishine@gmail.com
 * @Company: 3xData
 * @youWant: add you want
-->
<template>
  <view class="container_notifyForm">
    <!-- 导航栏 -->
    <action-bar :options="navOptions" />

    <view class="main">
      <view class="header">
        <view class="title">{{ form.title }}</view>
        <view class="time">{{ form.pushDate }}</view>
      </view>
      <!-- <view class="content"
            :href="baseApiUrl + form.fileUrls"
            @tap="imgView(form.content)">
      </view> -->
      <view class="content" v-html="form.content"></view>

      <!-- 如果不是pdf 点击下载-->
      <view v-if="hasPDF() && showAn" @click="btn_download()">点我下载</view>

      <!-- 如果是pdf 嵌套pdf -->
      <!-- 通过百度查询知道uniapp开发微信小程序时使用web-view跳转pdf文件链接时，Android是不生效的，ios可以正常跳转 -->
      <web-view v-else-if="showAn" :src="baseApiUrl + form.fileUrls"></web-view>
    </view>
  </view>
</template>
<script>

import { baseApiUrl } from '@/config.js'
export default {
  data() {
    return {
      baseApiUrl: baseApiUrl,
      navOptions: {
        left: {
          icon: 'back'
        },
        center: {
          title: ''
        }
      },
      form: {
        id: '',
        title: '',
        pushDate: '',
        content: ''
      },
      showAn: false
    }
  },
  onLoad: function (options) {
    this.form.id = options.id || ''

    this.navOptions.center.title = options.title || ''
    this.getForm()
  },
  methods: {
    // 下载非pdf文件
    btn_download() {
      const url = this.baseApiUrl + this.form.fileUrls

      uni.downloadFile({
        url,
        success: ({ statusCode, tempFilePath }) => {
          if (statusCode === 200) {
            uni.saveFile({
              tempFilePath,
              success: (res) => {
                uni.openDocument({
                  filePath: res.savedFilePath,
                  success: (res) => {
                    console.log('成功打开文档')
                  }
                })
              },
              fail: () => {
                console.log('下载失败')
              }
            })
          }
        }
      })
    },
    // 判断文件类型 是不是pdf文件
    hasPDF() {
      let that = this
      let result = false
      if (!this.form.fileUrls) return
      if (this.form.fileUrls.indexOf('.pdf') == -1) {
        result = true
        that.showAn = true
      } else {
        uni.showLoading({
          title: '加载中'
        });
        uni.getSystemInfo({
          success: res => {
            uni.hideLoading();
            if (res.platform === 'android') {
              that.showAn = false
              const url = that.baseApiUrl + that.form.fileUrls
              uni.downloadFile({
                url,
                success: ({ statusCode, tempFilePath }) => {
                  if (statusCode === 200) {
                    uni.saveFile({
                      tempFilePath,
                      success: (res) => {
                        uni.openDocument({
                          filePath: res.savedFilePath,
                          success: (res) => {
                            console.log('成功打开文档')
                          }
                        })
                      },
                      fail: () => {
                        console.log('下载失败')
                      }
                    })
                  }
                }
              })
            } else {
              that.showAn = true
            }
          }
        })
      }

      return result
    },
    // 如果返回的html中有图片，则放大查看
    imgView(content) {
      let imgSrc = []
      var reg = /(https?|http|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/g;
      imgSrc = content.match(reg);
      uni.previewImage({
        urls: imgSrc,
        current: imgSrc[0]
      })
    },
    getForm() {
      this.$store.dispatch('getContentManageById', this.form.id).then(({ data }) => {
        this.form = data
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.container_notifyForm {
  .main {
    padding: 0 40rpx 40rpx 40rpx;

    .header {
      text-align: center;

      .title {
        color: #333;
        font-weight: bold;
        font-size: 30rpx;
        margin-top: 40rpx;
        margin-bottom: 20rpx;
      }

      .time {
        font-size: 24rpx;
        color: #999;
        margin-bottom: 50rpx;
      }
    }
  }

  .btn_sign {
    height: 110rpx;
    width: 110rpx;
    border-radius: 50%;
    background: #ff9813;
    color: white;
    position: absolute;
    bottom: 200rpx;
    right: 40rpx;
    z-index: 2;
    line-height: 110rpx;
    text-align: center;
  }
}
</style>
<style lang="scss">
.content {

  /deep/ img,
  image {
    width: 100%;
    height: auto;
  }
}
</style>